<!-- <template>

    <view class="content">
        <view class="swiper-box">
            <u-swiper :list="acImgs" indicator indicatorMode="dot"  keyName="image" height="315"></u-swiper>
            <view class="tool-box">
                <view class="item"><u-icon name="eye" color="#FFFFFF"></u-icon> {{data.click}} </view>
                <view class="item"><u-icon name="share" color="#FFFFFF"></u-icon> {{data.share}} </view>
            </view>
        </view>
        <view class="pad20">
            <view class="title-box"> {{data.title}} </view>
            <view class="amount-box">
                费用：
                <block v-if="data.fee>0">
                <text class="fee">￥</text><text class="fee num">{{data.fee*100/100}}</text>
                </block>
                <text class="fee fee num" v-else>免费</text>
            </view>
            <view class="info-box">
                <view class="item"><u-icon name="clock" color="#999999"></u-icon> 报名时间：{{data.start_time}}-{{data.end_time}}</view>
                <view class="item"><u-icon name="clock" color="#999999"></u-icon> 活动时间：{{data.activity_time}}</view>
                <view class="item"><u-icon name="map" color="#999999"></u-icon> 地址： {{data.address}}</view>
                
            </view>
            <view class="detail-title">活动介绍 </view>
            <view class="detail-box">
                <u-parse :content="data.content"></u-parse>
            </view>
        </view>
        <view class="btn-box">
            <view class="ac-progress">
                报名进度:{{data.count}}/{{data.quota}}
                <u-line-progress height="6" :showText="false" :percentage="data.count/data.quota*100" :activeColor="(data.count/data.quota*100)>=80?'#f0ad4e':'#4cd964'"></u-line-progress>
            </view>
            <view class="btn">
                <u-button @click="toPage('/pages/active/join',{id:data.id})" shape="circle" type="primary" text="立即报名"></u-button>
            </view>
        </view>
    </view>

</template> -->



<template>
    <view class="content">
        <view class="swiper-box">
            <u-swiper :list="acImgs" indicator indicatorMode="dot"  keyName="image" height="315"></u-swiper>
            <view class="tool-box">
                <view class="item"><u-icon name="eye" color="#FFFFFF"></u-icon> {{data.click}} </view>
                <view class="item"><u-icon name="share" color="#FFFFFF"></u-icon> {{data.share}} </view>
            </view>
        </view>
        <view class="pad20">
            <view class="title-box"> {{data.title}} </view>
            <view class="amount-box">
                费用：
                <block v-if="data.fee>0">
                <text class="fee">￥</text><text class="fee num">{{data.fee*100/100}}</text>
                </block>
                <text class="fee fee num" v-else>免费</text>
            </view>
            <view class="info-box">
                <view class="item"><u-icon name="clock" color="#999999"></u-icon> 报名时间：{{data.start_time}}-{{data.end_time}}</view>
                <view class="item"><u-icon name="clock" color="#999999"></u-icon> 活动时间：{{data.activity_time}}</view>
                <view class="item"><u-icon name="map" color="#999999"></u-icon> 地址： {{data.address}}</view>
                
            </view>
            <view class="detail-title">活动介绍 </view>
            <view class="detail-box">
                <u-parse :content="data.content"></u-parse>
            </view>
        </view>
        <view class="btn-box">
            <view class="ac-progress">
                报名进度:{{data.count}}/{{data.quota}}
                <u-line-progress height="6" :showText="false" :percentage="data.count/data.quota*100" :activeColor="(data.count/data.quota*100)>=80?'#f0ad4e':'#4cd964'"></u-line-progress>
            </view>
            <view class="btn">
                <u-button @click="toPage('/pages/active/join',{id:data.id})" shape="circle" type="primary" text="立即报名"></u-button>
            </view>
        </view>
    </view>
    
</template>
<script>
	// export default {
	//         data() {
	//             return {
	//                 id:0,
	//                 data:{},
	//                 acImgs:[],
	//             }
	//         },
	//         onLoad(e) {
	//             this.id = e.id
	//             this.loadData()
	//         },
	//         methods: {
	//             loadData(){
	//                 let params = {
	//                     id: this.id,
	//                 }
	//                 uni.$u.http.get('/activity/detail',{params: params}).then((res) => {
	//                     if(res.code==1){
	//                         this.data = res.data
	//                         let acImgs = res.data.activity_images.split(',')
	//                         let that = this
	//                         acImgs.forEach(function(e) {
	//                             that.acImgs.push(that.baseUrl + e)
	//                         });
	//                     }
	//                 })
	//             }
	//         }
	//     }
	
	
	export default {
	        data() {
	            return {
	                id:0,
	                data:{},
	                acImgs:[],
	            }
	        },
	        onLoad(e) {
	            this.id = e.id
	            this.loadData()
	        },
	        methods: {
	            loadData(){
	                let params = {
	                    id: this.id,
	                }
	                uni.$u.http.get('/activity/detail',{params: params}).then((res) => {
	                    if(res.code==1){
	                        this.data = res.data
	                        let acImgs = res.data.activity_images.split(',')
	                        let that = this
	                        acImgs.forEach(function(e) {
	                            that.acImgs.push(that.baseUrl + e)
	                        });
	                    }
	                })
	            }
	        }
	    }
</script>

<style lang="scss">
.pad20{
        padding: 20px;
    }
    .swiper-box{
        position: relative;
        .tool-box{
            position: absolute;
            left: 10px;
            bottom: 10px;
            display: flex;
            .item{
                font-size: 12px;
                background-color: rgba(255, 255, 255, 0.3);
                color:#FFFFFF;
                display: flex;
                border-radius: 16px;
                margin-right: 8px;
                padding:2px 8px;
                /deep/.u-icon{
                    margin-right: 4px;
                }
            }
        }
    }
    .title-box{
        font-size: 20px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
    }
    .amount-box{
        padding-top: 20px;
        .fee{
            color:$uni-color-error;
        }
        .num{
            font-size: 22px;
        }
    }
    .info-box{
        padding: 8px 0;
        .item{
            font-size: 12px;
            font-weight: 400;
            line-height: 2;
            color: #999999;
            display: flex;
            /deep/.u-icon{
                margin-right: 4px;
            }
        }
    }
    .detail-title{
        margin-top: 20px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(16, 103, 219, 1);
    }
    .detail-box{
        padding-bottom: 50px;
    }
    .btn-box{
        padding: 10px;
        background-color: #FFFFFF;
        z-index: 999;
        position: fixed;
        left: 0;
        bottom: 0;
        width: calc(100% - 20px);
        display: flex;
        justify-content: space-between;
        box-shadow:0px -2px 5px #efefef;
        .ac-progress{
            width: 70%;
            padding: 10px;
            font-size: 12px;
            color:#888888;
            line-height: 1.5;
        }
        /deep/.u-button{
            background: linear-gradient(90deg, rgba(20, 158, 227, 1) 0%, rgba(10, 23, 207, 1) 100%);
        }
        
    }
</style>
